<template>
	<view class="home">
		<u-navbar title="曲线流量" :leftIconSize="24" :bgColor="bgColor" rightIcon="question-circle" :autoBack="true"
			:placeholder="true" safeAreaInsetTop>
			<view class="u-nav-slot" slot="right" @click="auxiliaryCurrentMeasurementFn">
				<u-icon name="order" color="#000" size="24"></u-icon>
			</view>
		</u-navbar>
		<!-- 内容 -->
		<view class="content">
			<view class="fortex">{{title}}</view>
			<view class="formula">公式：Q = kh<sup>n</sup></view>
			<view class="tabs_monitor">
				<view class="yuanq"></view>
				<view class="tabs_tx">
					水深：
				</view>
				<view class="tabs_inp">
					<u--input@change="inputchange" type="digit" placeholder="请输入内容" border="surround" v-model="h"
						:fontSize="fontSize" :color="color"></u--input>
				</view>
				<!-- 			<view class="tabs_xx">
					m
				</view> -->
			</view>
			<view class="tabs_monitor">
				<view class="yuanq">
				</view>
				<view class="tabs_tx">
					k值：
				</view>
				<view class="tabs_inp">
					<u--input@change="inputchange" type="digit" placeholder="请输入内容" border="surround" v-model="k"
						:fontSize="fontSize" :color="color"></u--input>
				</view>
				<!-- 			<view class="tabs_xx">
					m
				</view> -->
			</view>
			<view class="tabs_monitor">
				<view class="yuanq">
				</view>
				<view class="tabs_tx">
					n值：
				</view>
				<view class="tabs_inp">
					<u--input@change="inputchange" type="digit" placeholder="请输入内容" border="surround" v-model="n"
						:fontSize="fontSize" :color="color"></u--input>
				</view>
				<!-- 			<view class="tabs_xx">
					m
				</view> -->
			</view>
			<view class="tabs_monitor">
				<view class="yuanq">
				</view>
				<view class="tabs_tx">
					公式流量：
				</view>
				<view class="tabs_inp_pp">
					{{result.toFixed(2) }}
				</view>
				<view class="tabs_xx">
					m³/s
				</view>
			</view>
			<view class="tabs_monitor">
				<view class="yuanq">
				</view>
				<view class="tabs_tx">
					二次系数：
				</view>
				<view class="tabs_inp">
					<u--input@change="inputchange" type="digit" placeholder="请输入内容" border="surround" v-model="quadraticCoefficient"
						:fontSize="fontSize" :color="color"></u--input>
				</view>
				<!-- 			<view class="tabs_xx">
					m
				</view> -->
			</view>
			<view class="tabs_monitor">
				<view class="yuanq">
				</view>
				<view class="tabs_tx">
					实测流量：
				</view>
				<view class="tabs_inp_pp">
					{{measuredFlowRate.toFixed(2) }}
				</view>
				<view class="tabs_xx">
					m³/s
				</view>
			</view>
		</view>
		<view class="buttbox">
			<u-button class="custom-style" size="large" type="primary" text="上传数据" @click="uploadDataFn(1)"
				color='#ff7777' :showCancelButton="true"></u-button>
			<u-button class="custom-style" size="large" type="primary" text="保存数据" @click="uploadDataFn(0)"
				color='#aaaaff' :showCancelButton="true"></u-button>
		</view>
		<u-modal :show="showUploa" :title="titleuploa" :asyncClose="true" :showCancelButton="true"
			@confirm="confirmUpload" @cancel="cancelUpload"></u-modal>
		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleuploa: '是否上传数据',
				showUploa: false,
				k: 1,
				h: 0,
				n: 1,
				result: 0, //流量
				bgColor: '#f2f1f6',
				fontSize: '23px',
				color: '#2978de',
				toolName: '计时计数器',
				title: '',
				reportType: null, //上报类型
				quadraticCoefficient:1 ,//二次系数
				measuredFlowRate:0 //实测流量
			}
		},
		onLoad(option) {
			this.dataFormat()
			this.calculate()
		},
		methods: {
			// 上传数据
			uploadDataFn(e) {
				this.reportType = e
				this.showUploa = true

				console.log("点击上传");
			},
			// 确认
			confirmUpload() {
				this.measurePIAOFUFn()
				this.showUploa = false
			},
			// 取消
			cancelUpload() {
				this.reportType = null
				this.showUploa = false
			},
			// 处理数据格式
			dataFormat() {
				let obj = this.vuex_cezhanInfo
				let elect = {}
				if (this.toolName == '单轨测流车') {
					elect = obj.duopuleche
					elect.cexianlist = obj.duopuleche.cexianList
				}
				if (this.toolName == '索道式测流车') {
					elect = obj.suodaoche
					elect.cexianlist = obj.suodaoche.cexianList
				}
				if (this.toolName == '轨道式测流车') {
					elect = obj.guidaoche
					elect.cexianlist = obj.guidaoche.cexianList
				}
				if (this.toolName == '计时计数器') {
					elect = obj.celiugan
					elect.cexianlist = obj.celiugan.cexianList
				}
				this.qudikuandu = elect.qudikuandu
				this.lSA = elect.lSA
				this.rSA = elect.rSA
				this.title = obj.name
				this.k = obj.k
				this.n = obj.n
				console.log('选择测量仪器', this.toolName);
				console.log('原始数据', obj);
				console.log('格式化数据', elect);
			},
			// 上传
			measurePIAOFUFn() {
				if (this.result == 0 || this.result == '') {
					uni.showToast({
						title: '数据不完整',
						icon: 'error',
						duration: 2000
					});
					return
				}
				let ceVue = this.vuex_cezhanInfo
				let obj = {}
				if (ceVue.type == 0) {
					obj = {
						depthofwater: this.h * 1, //水深
						k: this.k * 1, //测长
						n: this.n * 1,
						flowrate: this.result * 1, //流量
						gspName: this.title, //名称
						ssId: ceVue.ssId, // 测站/灌溉站id
						sfsId: ceVue.sfsId, //测段id
						gspId: ceVue.id, //断面参数id
						reportType: this.reportType ,//上报类型
						quadraticCoefficient: this.quadraticCoefficient, //二次系数
						measuredFlowRate: this.measuredFlowRate //实测流量
					}
				}
				if (ceVue.type == 1) {
					obj = {
						depthofwater: this.h * 1, //水深
						k: this.k * 1, //测长
						n: this.n * 1,
						flowrate: this.result * 1, //流量
						gspName: this.title, //名称
						ssId: ceVue.ssId, // 测站/灌溉站id
						fmpId: ceVue.fmpId, //测段id
						gspId: ceVue.id, //断面参数id
						reportType: this.reportType, //上报类型
						quadraticCoefficient: this.quadraticCoefficient, //二次系数
						measuredFlowRate: this.measuredFlowRate //实测流量
					}
				}
				console.log('------------',obj);
				// if(true){
				// 	return
				// }
				uni.$u.http.post('/device/curveFlowRecording/add', obj).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: '保存成功',
							duration: 1500
						});
					} else {
						this.toastFn(res.msg)
						uni.redirectTo({
							url: '/pages/login'
						});
					}
				}).catch(err => {
					this.toastFn(res.msg)
					uni.redirectTo({
						url: '/pages/login'
					});
					console.log('错误', err);
				})
			},
			toastFn(data) {
				this.$refs.uToast.show({
					type: "error",
					message: data,
				})
			},
			// input
			inputchange() {
				this.calculate()
			},
			// 计算
			calculate() {
				if (this.h < 0 && this.n % 1 !== 0) {
					uni.showToast({
						title: '负数不能有小数指数',
						icon: 'error'
					})
					return
				}
				this.result = this.k * Math.pow(this.h, this.n)
				this.measuredFlowRate = this.result * this.quadraticCoefficient
				console.log('流量', this.result);
			},

			auxiliaryCurrentMeasurementFn() {
				uni.navigateTo({
					url: '/pages/formula/trafficHistory'
				});
			},
			retFn() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	// 水情
	.content {
		padding: 20rpx;

		.fortex {
			font-size: 50rpx;
			text-align: center;
			color: #2978de;
		}

		.formula {
			font-size: 50rpx;
			text-align: center;
			color: #000000;
		}

		.tabs_monitor {
			margin: 20rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			font-size: 45rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #000000;
			background-color: #ffffff;

			.yuanq {
				width: 10rpx;
				height: 50rpx;
				background-color: #f2f1f6;
				margin-right: 20rpx;
				border-radius: 50rpx;
			}

			.tabs_tx {
				width: 240rpx;
				font-size: 40rpx;
				text-align: justify;
				text-align-last: justify;
				// background-color: #aaffff;
			}

			.tabs_inp {
				width: 350rpx;
				text-align: center;
				font-size: 70rpx;
				// font-size: 70rpx;
				// margin-right: 30rpx;
				color: #55557f;
				// display: flex;
				// align-items: center;
				// background-color: #aaaaff;
			}

			.tabs_inp_pp {
				width: 250rpx;
				text-align: center;
				font-size: 70rpx;
				// font-size: 70rpx;
				// margin-right: 30rpx;
				color: #7373ab;
				// display: flex;
				// align-items: center;
				// background-color: #aaaaff;
			}

			.tabs_xx {
				width: 100rpx;
				// color: #ffaa00;
				// background-color: #ffe26c;
			}
		}
	}

	// 上传
	.buttbox {
		padding: 30rpx;

		.custom-style {
			margin-top: 30rpx;
			border-radius: 30rpx;
		}
	}


	.tophead {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 60rpx 20rpx 10rpx 20rpx;
		color: #000000;
		background-color: #f3f3f3;
	}

	.u-nav-slot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5rpx 10rpx;
	}
</style>
<style>
	page {
		background-color: #f2f1f6;
	}
</style>